<template>
  <div class="main" v-color="'bgkImg'">
    <div class="top-box">
      <div class="box-tip"><qq>Signup</qq></div>
    </div>
    <div class="box-1">

      <dz-input v-model="form.account"
                @phone="phone"
                @keyup.enter.native="submit"
                :rule="rule.account"
                :rule-label="$t('PleaseenterPhoneNumber')"
                type="phone"
                :placeholder="$t('PleaseenterPhoneNumber')"
                :label="$t('PhoneNumber')"/>

      <dz-input
          v-model="form.pwd"
          :rule="rule.pwd"
          @keyup.enter.native="submit"
          :rule-label="$t('PleaseenterPassword')"
          type="password"
          :placeholder="$t('PleaseenterPassword')"
          :label="$t('Password')"/>

<!--      <div class="forget">Forgot Password?</div>-->
      <div class="forget">
        <span><qq>Rememberpassword</qq></span>
        <div class="btn" @click="remember" :class="{remember:isRemember}">
          <div class="circle"/>
        </div>
      </div>
    </div>
    <div class="bottom-btn">
      <dz-button @click="submit"><qq>LogIn</qq></dz-button>
      <div class="tip">
        <qq>haveaccount</qq>? <b v-routers="{path:'/reg'}"><qq>SignUpNow</qq></b>
      </div>
    </div>
    <dz-safe></dz-safe>
  </div>
</template>

<script>

import {getItem, removeItem, setItem} from "@/utils/auth";
import {Toast} from "vant";

  export default {
    data(){
      return{
        form:{account:'',internationalCode:'',pwd:''},
        isRemember:false,
        rule:{account:false,pwd:false}
      }
    },
    methods:{
      phone(item){
        this.form.internationalCode = item
      },
      remember(){
        this.isRemember=!this.isRemember
        if (this.isRemember){
          setItem('phone',this.form)
        }else{
          removeItem('phone')
        }
      },

      submit(){
        if (this.form.account===''){this.rule.account=true}
        else if (this.form.pwd===''){this.rule.pwd=true}
        else{
          this.rule.account=false
          this.rule.pwd=false
          this.$store.dispatch('loginSetToken',this.form).then(res=>{
            Toast.loading({message:this.$t('Loading')})
            setTimeout(()=>{
              for(let key in this.form){this.form[key] = ''}
              removeItem('phone')
              this.$router.push('/')},1500)
          }).catch(err=>{})
        }
      },
      getList(){
        if (getItem('phone')){
          this.form = getItem('phone')
          if (getItem('phone')){
            let s = getItem('phone')
            if (s && s.isReg){
              this.submit()
            }
          }

        }else{
          for (let key in this.form){
            this.form[key]=''
          }
        }
      }
    },

    mounted() {
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  padding: 20px 0 0 0;
  box-sizing: border-box;
  position: relative;
  .top-box{
    width: 100%;
    height: 60px;
    .box-tip{
      width: 117px;
      height: 39px;
      background: #5A4CBB;
      border-radius: 50px 50px 50px 50px;
      font-weight: 800;
      font-size: 26px;
      color: #F1F3F6;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
    }
  }
  .box-1{
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    .forget{
      width: 100%;
      font-weight: bold;
      font-size: 14px;
      color: #533DF1;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        font-weight: 400;
        font-size: 16px;
        color: #5B6B86;
      }
      .btn{
        width: 36px;
        height: 14px;
        background: #F4F3FE;
        border-radius: 360px 360px 360px 360px;
        display: flex;
        align-items: center;
        .circle{
          width: 20px;
          height: 20px;
          background: linear-gradient( 131deg, #806FFF 0%, #30238B 100%);
          box-shadow: 1px 1px 1px 0px rgba(51,51,51,0.25);
          border-radius: 50%;
        }
      }
      .remember{
        background: #806FFF;
        justify-content: right;
      }
    }
  }
  .bottom-btn{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 16px;
    box-sizing: border-box;
    height: 200px;
    .tip{
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #5B6B86;
      margin-top: 10px;
      b{
        font-weight: bold;
        font-size: 14px;
        color: #533DF1;
        text-decoration: underline;
        text-underline-color: #533DF1;
      }
    }
  }
}
</style>